<template>
  <el-aside width="300px" v-loading="loading" v-show="asideOpen">
    <el-container>
      <el-header>
        <el-input placeholder="输入关键字进行过滤" v-model="searchValue" clearable
                  style="margin-right: 10px;"></el-input>
        <el-button type="primary" plain icon="el-icon-refresh" @click="getList"></el-button>
      </el-header>
      <el-main class="no-padding">
        <el-tree ref="treeRef" class="menu" node-key="id" :data="treeList" :props="categoryProps"
                 :highlight-current="true" :expand-on-click-node="false" :filter-node-method="handleFilterNodeMethod"
                 @node-click="handleNodeClick">
          <template #default="{ node, data }">
							<span class="custom-tree-node">
                <el-tag :type="data.generated ? 'success' : 'danger'">
                  <span class="label">{{ node.label }}</span>
                </el-tag>
								<span :class="showDo ? 'code' : ''">{{ data.name }}</span>
								<span class="do" v-if="showDo">
									<el-button-group>
										<el-button icon="el-icon-edit" size="small" @click.stop="handleEditClick(data)"
                               v-powers="['system:row:info']"></el-button>
										<el-button icon="el-icon-delete" size="small" @click.stop="handleDeleteClick(data)"
                               v-power="'system:row:del'"></el-button>
									</el-button-group>
								</span>
							</span>
          </template>
        </el-tree>
      </el-main>
      <el-footer style="padding: 0 20px; line-height: 49px;">
        <el-button type="primary" size="small" icon="el-icon-plus" style="width: 100%" @click="handleIntoClick">
          表结构导入
        </el-button>
      </el-footer>
    </el-container>
  </el-aside>

  <el-dialog destroy-on-close append-to-body :close-on-click-modal="false" width="1080px" title="编辑表结构"
             v-model="open" @closed="handleCancel">
    <table-form-vue ref="tableFormRef" :form="form"></table-form-vue>
    <template #footer>
      <el-button plain type="warning" :loading="saving" @click="handleSubmitForm"
                 v-power="['system:row:edit' , 'system:menu:lists' , 'system:category:lists']">
        修 改
      </el-button>
      <el-button plain type="info" @click="handleCancel">取 消</el-button>
    </template>
  </el-dialog>

  <el-dialog destroy-on-close append-to-body :close-on-click-modal="false" width="1080px" title="导入表结构"
             v-model="into" @closed="handleIntoCancel">
    <into-form-vue ref="intoFormRef" :form="intoForm"></into-form-vue>
    <template #footer>
      <el-button plain type="primary" :loading="intoIng" @click="handleIntoSubmit"
                 v-power="'system:row:importTableByNameList'">导 入
      </el-button>
      <el-button plain type="info" @click="handleIntoCancel">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import intoFormVue from "./into.vue";
import tableFormVue from "./table.vue";
import tableApi from "@/api/generator/row/index";
import modal from "@/utils/modal/index";

const emit = defineEmits(['nodeClick']);
const props = defineProps({
  showDo: {
    type: Boolean,
    default: false
  },
  asideOpen: {
    type: Boolean,
    default: false
  }
});

const tableFormRef = ref(null);
const intoFormRef = ref(null);
const treeRef = ref(null);
const loading = ref(false);
const searchValue = ref("");
const treeList = ref([]);
const categoryProps = {
  label: "comment",
};
const open = ref(false);
const saving = ref(false);
const form = ref({
  id: null,
  name: null,
  comment: null,
  subName: null,
  subField: null,
  categoryId: null,
  packageName: null,
  className: null,
  moduleName: null,
  businessName: null,
  functionAuthor: null,
  functionName: null,
  generatorType: null,
  generatorPath: null,
  parentMenuId: null,
  generated: null,
  options: null,
  sort: null,
  remark: null
});
const intoForm = ref({
  sourceCode: null,
  tableNameList: []
});
// 弹出层状态
const into = ref(false);
// 保存状态
const intoIng = ref(false);

const handleFilterNodeMethod = (value, data) => {
  if (!value) return true;
  const targetText = data.comment + data.name;
  return targetText.indexOf(value) !== -1;
}

const handleNodeClick = (data) => {
  emit('nodeClick', data);
}

const getList = () => {
  loading.value = true;
  tableApi.lists.get().then(response => {
    treeList.value = response.data.list;
    loading.value = false;
  })
}

const handleCancel = () => {
  resetForm(tableFormRef.value.getFormRef());
  open.value = false;
}

const resetForm = (formEl) => {
  form.value = {
    id: null,
    name: null,
    comment: null,
    subName: null,
    subField: null,
    categoryId: null,
    packageName: null,
    className: null,
    moduleName: null,
    businessName: null,
    functionAuthor: null,
    functionName: null,
    generatorType: null,
    generatorPath: null,
    parentMenuId: null,
    generated: null,
    options: null,
    sort: null,
    remark: null
  };
  if (!formEl) return;
  formEl.resetFields();
}

const handleSubmitForm = () => {
  saving.value = true;
  const formRef = tableFormRef.value.getFormRef();
  formRef.validate(valid => {
    if (valid) {
      // 修改
      tableApi.edit.put(form.value).then(response => {
        modal.message(response.message, {type: response.status ? 'success' : 'error'})
        saving.value = false;
        if (response.status) {
          handleCancel();
          getList();
        }
      })
    } else {
      modal.errorMessage("表单校验失败");
      saving.value = false;
    }
  });
}

// 删除按钮方法
const handleDeleteClick = (row) => {
  const idList = [row.id];
  modal.confirm(`确定删除选中的 ${idList.length} 项吗？`).then(() => {
    tableApi.del.delete(idList).then(response => {
      if (response.status) {
        modal.successMessage(response.message);
        getList();
      } else {
        modal.errorMessage(response.message);
      }
    });
  }).catch(() => {
    modal.infoMessage("用户取消操作");
  })
}

// 编辑按钮方法
const handleEditClick = (row) => {
  tableApi.info.get(row.id, true).then(response => {
    form.value = response.data;
    open.value = true;
  });
}

const handleIntoClick = () => {
  into.value = true;
}

const handleIntoCancel = () => {
  into.value = false;
  intoForm.value = {
    sourceCode: null,
    tableNameList: []
  }
}

const handleIntoSubmit = () => {
  // 新增
  intoIng.value = true;
  tableApi.add.post(intoForm.value).then(response => {
    modal.message(response.message, {type: response.status ? 'success' : 'error'})
    intoIng.value = false;
    if (response.status) {
      handleIntoCancel();
      getList();
    }
  })
}

onMounted(() => {
  getList();
});

watch(() => searchValue.value, (value) => {
  treeRef.value.filter(value);
});

defineExpose({getList});
</script>

<style scoped>
.menu:deep(.el-tree-node__label) {
  display: flex;
  flex: 1;
  height: 100%;
}

.custom-tree-node {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 24px;
  height: 100%;
}

.custom-tree-node .code {
  font-size: 12px;
  color: #999;
}

.custom-tree-node .do {
  display: none;
}

.custom-tree-node:hover .code {
  display: none;
}

.custom-tree-node:hover .do {
  display: inline-block;
}
</style>
